import React from "react";
import './TodoMain.css';
import TodoItem from "../TodoItem/TodoItem";
export default function TodoMain(props) {
  // 获取任务数据
  let {todos, modifyTodo, removeTodo} = props;
  
  return (
    <ul className="todo-main">
      {
        todos.map(item => {
          return <TodoItem  
                  item={item}  
                  key={item.id}  
                  modifyTodo={modifyTodo}
                  removeTodo={removeTodo}
                />
        })
      }
      { todos.length === 0 && <li className="empty">暂无数据</li>}
    </ul>
  );
}
